<template>
	<div class="wrap">
		<!-- 搜索条件 -->
		<el-form ref="form" :inline="true" size="small" :model="forms" class="form" label-width="100px">
			<el-form-item label="用户手机号" prop="mobile">
				<el-input v-model="forms.mobile" placeholder="请输入用户手机号" clearable />
			</el-form-item>
			<el-form-item label="用户姓名" prop="true_name">
				<el-input v-model="forms.true_name" placeholder="请输入用户姓名" clearable />
			</el-form-item>
			<el-form-item label="用户身份证号" prop="cid_no">
				<el-input v-model="forms.cid_no" placeholder="请输入用户身份证号" clearable />
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
					搜索
				</el-button>
			</p>
		</el-form>
		<div class="answer-bot">
			<el-table :data="tableData" stripe border>
				<el-table-column
					label="用户编号"
					prop="member_id"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="用户手机号"
					prop="mobile"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="用户姓名"
					prop="true_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="用户身份证号"
					prop="cid_no"
					min-width="180px"
					show-overflow-tooltip
					align="center"
				/>

				<!-- <el-table-column label="状态" width="95" align="center">
					<template slot-scope="scope">
						<el-select
							v-if="scope.row.username !== '超级管理员'"
							v-model="scope.row.use_status"
							size="mini"
							placeholder="请选择"
							style="width: 70px"
							@change="changeUserStatus(scope.row)"
						>
							<el-option label="启用" value="1" />
							<el-option label="停用" value="-1" />
						</el-select>
						<span v-else>--</span>
					</template>
				</el-table-column> -->
				<el-table-column label="操作" width="160" align="center">
					<template slot-scope="scope">
						<el-link
							type="primary"
							:underline="false"
							@click="
								$router.push({ path: '/user-manage/detail', query: { id: scope.row.member_id } })
							"
						>
							查看详情
						</el-link>
						<el-link type="primary" :underline="false" @click="onChange(scope.row)">
							{{ scope.row.is_close === 1 ? '解封' : '封号' }}
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="pageChange"
					/>
				</el-col>
			</el-row>
		</div>
		<details-notice ref="details" />
		<el-dialog title="提示" :visible.sync="dialogVisible" width="550px">
			<!-- 当前状态封号 -->
			<h4 style="margin: 8px 0 0 14px; font-size: 16px" v-if="formData.is_close == 1">
				是否确定解封当前账号？
			</h4>
			<template v-else>
				<h4 style="margin: 8px 0 24px 14px; font-size: 16px">
					是否确定对当前账号进行封号操作，不设置解封时间默认永久封号？
				</h4>
				<el-form inline size="small" :model="formData" label-width="100px" @keyup.enter.native>
					<el-form-item label="解封时间：">
						<el-date-picker
							v-model="formData.stop_expire"
							type="date"
							:editable="false"
							value-format="yyyy-MM-dd"
							placeholder="选择解封时间"
							style="width: 100%"
							:picker-options="dateOptions"
						/>
					</el-form-item>
				</el-form>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" style="margin-right: 10px" size="small">
					取 消
				</el-button>

				<el-button type="primary" size="small" @click="changeUserStatus">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { changeStatus, getList } from '@/api/user-manager'
	import Pagination from '@/components/Pagination'
	import DetailsNotice from './components/details'
	export default {
		components: {
			Pagination,
			DetailsNotice
		},
		data() {
			return {
				forms: {
					mobile: '',
					true_name: '',
					use_status: ''
				},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				dialogVisible: false,
				formData: {},
				dateOptions: {
					// 可选日期限制，最小可选值为当前日期
					disabledDate: time => {
						return time <= new Date().getTime() - 24 * 60 * 60 * 1000
					}
				}
			}
		},
		created() {
			this.searchData()
		},
		methods: {
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				const data = {
					...this.forms,
					page_no: this.pageNo,
					page_size: this.pageSize
				}
				this.tableData = []
				getList(data).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			seeDetails(row) {
				this.$refs.details.init(row)
			},
			onChange(row) {
				this.formData = {
					...row,
					stop_expire: ''
				}
				this.dialogVisible = true
			},
			// 封号/解封
			changeUserStatus() {
				const loading = this.$setLoading({ text: '提交中，请稍等~' })
				changeStatus({
					member_id: this.formData.member_id,
					is_close: this.formData.is_close == 1 ? 0 : 1,
					stop_expire: this.formData.stop_expire
				}).then(
					res => {
						loading.close()
						this.$message.success('设置成功！')
						this.dialogVisible = false
						this.loadData()
					},
					err => {
						loading.close()
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		.roles-table {
			margin-top: 30px;
		}

		.tree-label {
			font-size: 14px;
			color: #606266;
			font-weight: bolder;
			padding-left: 9px;
		}

		.permission-tree {
			margin: 30px;
		}
	}

	.el-link {
		margin-right: 16px;
	}
	.form {
		background: #ffffff;
		padding: 20px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
</style>
